<script setup lang="ts">
import { delArticleAPI, getArticleListAPI } from '@/apis/article';
import ChannelSelect from '@/components/ChannelSelect.vue';
import type { ArticleItem, ArticleListParams } from '@/types/article';
import { Delete, Edit } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, ref, watch } from 'vue';
// 请求文章列表数据
const articleListParams = ref<ArticleListParams>({
  status: undefined,
  channel_id: null,
  begin_pubdate: null,
  end_pubdate: null,
  page: 1,
  per_page: 2,
})

// 获取文章列表数据
const articleList = ref<ArticleItem[]>([])
// 总条数
const total = ref<number>(0)
// date picker组件的日期范围
const dateArr = ref<string[]>([])
// 侦听date picker组件的日期范围
watch(dateArr, (newVal) => {
  if (newVal === null) {
    articleListParams.value.begin_pubdate = null
    articleListParams.value.end_pubdate = null
  } else {
    articleListParams.value.begin_pubdate = newVal[0]
    articleListParams.value.end_pubdate = newVal[1]
  }
  }
)
// 获取文章列表数据
const getArticleList = async() => {
  const res = await getArticleListAPI(articleListParams.value)
  console.log('articleList',res)
  articleList.value = res.data.results
  total.value = res.data.total_count
}

onMounted(() => {
  getArticleList()
})

// 筛选按钮点击事件
const onSearch = () => {
  articleListParams.value.page = 1
  getArticleList()
}
// 删除按钮点击事件
const delArticle = async(id: number) => {
   ElMessageBox.confirm('是否确认删除该文章？', '狠心提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async() => {
    // 删除文章
    await delArticleAPI(id)
    ElMessage.success('删除成功')
    getArticleList()
  }).catch(() => {})
}

</script>

<template>

 <div class='article-page'>
  <!-- 筛选区域 -->
  <el-card>
    <div default="header">
      <!-- 面包屑组件 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 表单组件 -->
    <el-form label-width="80px" style="margin-top: 20px;">

        <el-form-item label="状态：" >
          <el-radio-group v-model="articleListParams.status">
            <el-radio :value="null">全部</el-radio>
            <el-radio :value="0">草稿</el-radio>
            <el-radio :value="1">待审核</el-radio>
            <el-radio :value="2">审核通过</el-radio>
            <el-radio :value="3">审核失败</el-radio>
          </el-radio-group>
        </el-form-item>
        
      <!-- 频道选择 -->
      <el-form-item label="频道：" style="max-width: 400px">
       <ChannelSelect v-model="articleListParams.channel_id" />
       </el-form-item>

      <el-form-item label="日期：" style="max-width: 400px">
        <el-date-picker
          type="daterange"
          v-model="dateArr"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="onSearch">筛选</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 筛选结果区域 --> 
  <el-card style="margin-top:20px">
  <div default="header">根据筛选条件共查询到 {{ total }} 条结果：</div>
  <!-- 表格 -->
  <el-table :data="articleList">
    <el-table-column label="封面">
      <template #default="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.cover.images[0]"
          :preview-src-list="scope.row.cover.images"
          :preview-teleported="true"
          :hide-on-click-modal="true"
        ></el-image>
      </template>
    </el-table-column>
    <el-table-column label="标题" prop="title"></el-table-column>
    <el-table-column label="状态" prop="status">
      <template #default="scope">
            <el-tag v-if="scope.row.status === 0" type="info">草稿</el-tag>
            <el-tag v-else-if="scope.row.status === 1">待审核</el-tag>
            <el-tag v-else-if="scope.row.status === 2" type="success">审核通过</el-tag>
            <el-tag v-else-if="scope.row.status === 3" type="warning">审核失败</el-tag>
          </template>
    </el-table-column>
    <el-table-column label="发布时间" prop="pubdate"></el-table-column>
    <el-table-column label="阅读数" prop="read_count"></el-table-column>
    <el-table-column label="评论数" prop="comment_count"></el-table-column>
    <el-table-column label="点赞数" prop="like_count"></el-table-column> 
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" :icon="Edit" circle @click="$router.push(`/publish/${scope.row.id}`)"></el-button>
        <el-button type="danger" :icon="Delete" circle @click="delArticle(scope.row.id)"></el-button>
      </template>
    </el-table-column>
  </el-table>
    <!-- 分页 -->
    <el-pagination
      :page-sizes="[2, 5, 10, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      v-model:current-page="articleListParams.page"
      v-model:page-size="articleListParams.per_page"
      @change="getArticleList"
    />
</el-card>
</div>

</template>


<style scoped lang="less">


</style>